<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        /* 定义一个居中容器样式 */
        .container {
            margin: 0 auto; /* 水平居中 */
            margin-top: 70px; /* 上边距设置为70px */
            text-align: center; /* 文本居中对齐 */
            width: 300px; /* 容器宽度设置为300px */
        }

        /* 定义副标题样式 */
        .subTitle {
            color: gray; /* 文字颜色为灰色 */
            font-size: 14px; /* 字体大小为14px */
        }

        /* 定义标题样式 */
        .title {
            font-size: 45px; /* 字体大小为45px */
        }

        /* 定义输入框样式 */
        .input {
            width: 90%; /* 输入框宽度为容器宽度的90% */
        }

        /* 定义输入框容器样式 */
        .inputContainer {
            text-align: left; /* 文本左对齐 */
            margin-bottom: 20px; /* 下边距设置为20px */
        }

        /* 定义子容器样式 */
        .subContainer {
            text-align: left; /* 文本左对齐 */
        }

        /* 定义字段样式 */
        .field {
            font-size: 14px; /* 字体大小为14px */
        }

        /* 定义输入框样式 */
        .input {
            border-radius: 6px; /* 圆角边框 */
            height: 25px; /* 高度为25px */
            margin-top: 10px; /* 上边距为10px */
            border-color: silver; /* 边框颜色为银色 */
            border-style: solid; /* 实线边框 */
            background-color: cornsilk; /* 背景颜色为浅黄色 */
        }

        /* 定义提示信息样式 */
        .tip {
            margin-top: 5px; /* 上边距为5px */
            font-size: 12px; /* 字体大小为12px */
            color: gray; /* 文字颜色为灰色 */
        }

        /* 定义设置信息样式 */
        .setting {
            font-size: 9px; /* 字体大小为9px */
            color: black; /* 文字颜色为黑色 */
        }

        /* 定义标签样式 */
        .label {
            font-size: 12px; /* 字体大小为12px */
            margin-left: 5px; /* 左边距为5px */
            height: 20px; /* 高度为20px */
            vertical-align: middle; /* 垂直居中对齐 */
        }

        /* 定义复选框样式 */
        .checkbox {
            height: 20px; /* 高度为20px */
            vertical-align: middle; /* 垂直居中对齐 */
        }

        /* 定义按钮样式 */
        .btn {
            border-radius: 10px; /* 圆角边框 */
            height: 40px; /* 高度为40px */
            width: 300px; /* 宽度为300px */
            margin-top: 30px; /* 上边距为30px */
            background-color: deepskyblue; /* 背景颜色为深天蓝色 */
            border-color: blue; /* 边框颜色为蓝色 */
            color: white; /* 文字颜色为白色 */
        }
    </style>
</head>
<body>
<div class="container" id="Application">
    <div class="subTitle">加入我们</div>
    <h1 class="title">创建你的账号</h1>
    <div v-for="(item,index) in fields" class="inputContainer">
        <div class="field">{{item.title}}<span v-if="item.required" style="color: red">*</span></div>
        <input class="input" v-model="item.model" :type="item.type"/>
        <div class="tip" v-if="index==2">请输入大于六位的密码</div>
    </div>
    <div class="subContainer">
        <div class="setting">偏好设置</div>
        <input class="checkbox" type="checkbox"/><label class="label">接受更新邮件</label>
        <button class="btn" @click="createAccount">创建账号</button>
    </div>
</div>
<script>
    // 定义一个名为 App 的 Vue 组件
    var App = {
        // 定义组件的数据
        data() {
            return {
                // 定义一个 fields 数组，包含表单字段的信息
                fields: [
                    {
                        // 字段的标题
                        title: "用户名",
                        // 是否必填
                        required: true,
                        // 字段的类型
                        type: "text",
                        // 字段的值
                        model: ""
                    },
                    {
                        title: "邮箱地址",
                        required: false,
                        type: "text",
                        model: ""
                    },
                    {
                        title: "密码",
                        required: true,
                        type: "password",
                        model: ""
                    }
                ]
            }
        },
        // 定义计算属性
        computed: {
            // 用户名的计算属性
            name: {
                // 获取用户名的值
                get() {
                    return this.fields[0].model
                },
                // 设置用户名的值
                set(value) {
                    this.fields[0].model = value
                }
            },
            // 邮箱地址的计算属性
            email: {
                get() {
                    return this.fields[1].model
                },
                set(value) {
                    this.fields[1].model = value
                }
            },
            // 密码的计算属性
            password: {
                get() {
                    return this.fields[2].model
                },
                set(value) {
                    this.fields[2].model = value
                }
            }
        },
        // 定义组件的方法
        methods: {
            // 创建账号的方法
            createAccount() {
                // 如果用户名长度为 0，弹出提示信息
                if (this.name.length == 0) {
                    alert("请输入用户名")
                    return
                    // 如果邮箱地址长度不为 0，且不包含 @ 符号，弹出提示信息
                } else if (this.email.length != 0 && !this.email.includes("@")) {
                    alert("请输入正确的邮箱地址")
                    return
                    // 如果密码长度小于 6，弹出提示信息
                } else if (this.password.length < 6) {
                    alert("请输入大于六位的密码")
                    return
                    // 如果所有条件都满足，弹出注册成功的提示信息
                    alert("注册成功")
                    // 在控制台输出注册信息
                    console.log("name:${this.name},email:${this.email},password:${this.password}")
                    // 重置用户名、邮箱地址和密码
                    this.name = ""
                    this.email = ""
                    this.password = ""
                }
            }
        }
    }
    // 创建一个 Vue 应用实例，并挂载到 id 为 Application 的元素上
    Vue.createApp(App).mount("#Application")
</script>
</body>
</html>
